{% extends "page.html"%}
{% block main %}
<div class="container">
  <div id="spawner-mask" class="load-mask">
    <div class="primehub-spinner">
      <span class="primehub-logo">
        <img src="{{ static_url("images/primehub-logo.png") }}" alt="">
      </span>
      <div style="text-align: center">Canceling</div>
      <div class="line-spinner">
        <div class="inner"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="custom-progress-bar" class="custom-progress-bar">
      <ul class="progress-bar-inner">
        <li id="li-preparing" class="tick">
          <div class="dot">
            <div class="dot-inner"></div>
          </div>
          <div class="label label--start">Preparing</div>
          <div class="bar">
            <div class="bar-left"></div>
            <div class="bar-middle"></div>
            <div class="bar-right"></div>
          </div>
        </li>
        <li id="li-pulling" class="tick">
          <div class="dot">
            <div class="dot-inner"></div>
          </div>
          <div class="label label--start">Pulling</div>
          <div class="bar">
            <div class="bar-left"></div>
            <div class="bar-middle"></div>
            <div class="bar-right"></div>
          </div>
        </li>
        <li id="li-creating" class="tick">
          <div class="dot">
            <div class="dot-inner"></div>
          </div>
          <div class="label label--start">Creating</div>
          <div class="bar">
            <div class="bar-left"></div>
            <div class="bar-middle"></div>
            <div class="bar-right"></div>
          </div>
        </li>
        <li id="li-running" class="tick">
          <div class="dot">
            <div class="dot-inner"></div>
          </div>
          <div class="label label--start">Running</div>
          <div class="bar">
            <div class="bar-left"></div>
            <div class="bar-middle"></div>
            <div class="bar-right"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="text-center">
      <a href="/hub/api/primehub/users/{{user.escaped_name}}/stop-spawning" class="cancel-spawn btn btn-lg btn-danger">Cancel</a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <p id="progress-message"></p>
      <details id="progress-details">
        <summary style="display: list-item">Event log</summary>
        <div id="progress-log"></div>
      </details>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
{{ super() }}
<script>
(function(){
  var evtSource = new EventSource("{{ progress_url  }}");
  var progressBar = $('#custom-progress-bar');
  var progressMessage = $("#progress-message");
  var progressLog = $("#progress-log");
  var cancelSpawn = $(".cancel-spawn");
  // Regex for parse the pod log.
  const STAT_SET = 'in-progress done warning error';
  const IN_PROGRESS = 'in-progress';
  const COMPLETE = 'done';
  const WARNING = 'warning';
  const ERROR = 'error';
  const regServerReq = /Server requested/g;
  const regAttached = /Attach succeeded/g;
  const regPulling = new RegExp('Pulling image \"{{ spawner.image }}\"');
  const regPulled = new RegExp('Successfully pulled image \"{{ spawner.image }}\"');
  const regImageExist = new RegExp('Container image \"{{ spawner.image }}\" already present on machine');
  const regCreatedContainer = /Created container notebook/g;
  const regFailedPull = /Failed to pull image/gi;
  // Stage check point elements.
  const stagePrepare = $('#li-preparing');
  const stagePull= $('#li-pulling');
  const stageCreate = $('#li-creating');
  const stageRun = $('#li-running');
  const PREPARING = 1;
  const PULLING = 2;
  const CREATING = 3;
  const RUNNING = 4;
  const DONE = 5;

  const setProgress = function (currentStage, status=IN_PROGRESS) {
    var $progressBarInner = $("ul.progress-bar-inner");
    prevElem = "li:nth-child(-n+" + (currentStage - 1) + ")";
    currentElement = "li:nth-child(" + currentStage + ")";
    $progressBarInner
      .find(prevElem)
      .removeClass(STAT_SET)
      .addClass(COMPLETE);
    $progressBarInner
      .find(currentElement)
      .addClass(status);
  };

  evtSource.onmessage = function(e) {
    var evt = JSON.parse(e.data);
    var msg = evt.message;
    var $inProgress = $('.in-progress');
    if (evt.progress !== undefined && msg !== undefined) {
      if (regImageExist.test(msg) || regPulled.test(msg)) {
        setProgress(CREATING);
        $inProgress = stageCreate;
      } else if (regPulling.test(msg)) {
        setProgress(PULLING);
        $inProgress = stagePull;
      } else if (regFailedPull.test(msg)) {
        $inProgress = stagePull;
        $inProgress.addClass(WARNING);
      } else if (regAttached.test(msg)) {
        setProgress(PULLING);
        $inProgress = stagePull;
      } else if (regServerReq.test(msg)) {
        setProgress(PREPARING);
        $inProgress = stagePrepare;
      }
    }

    // update message
    var html_message;
    if (msg !== undefined) {
      progressMessage.text(msg);
      html_message = progressMessage.html();
    }
    if (html_message) {
      progressLog.append(
        $("<div>")
        .addClass('progress-log-event')
        .html(html_message)
      );
    }
    if (evt.ready) {
      evtSource.close();
      // reload the current page
      // which should result in a redirect to the running server
      setProgress(RUNNING);
      setTimeout(function(){
        setProgress(DONE);
        if (window.self === window.top) {
          window.location.reload();
        } else {
          {% if not spawner.launch_path %}
            var newWindow = window.open(window.location,'primehub-notebook');
            if (newWindow) {
              newWindow.focus();
            }
          {% endif %}
          window.location = '/hub/home';
        }
      }, 1600);
    }
    if (evt.failed) {
      evtSource.close();
      // turn progress bar red
      $inProgress.removeClass(STAT_SET).addClass(ERROR);
      // open event log for debugging
      $('#progress-details').prop('open', true);
    }

  };
  cancelSpawn.on('click', function(event) {
    $('#spawner-mask').addClass('active');
  });
})();
</script>
{% endblock %}

